<template>
	<view class="interaction-buttons" :class="{ visible: isInteractionVisible }">
		<view class="like-comment">
			<text class="like-button"><uni-icons type="heart" size="40"></uni-icons> {{
		favouriteCount }}</text>
			<text class="comment-button" @click="gotoCommentList"><uni-icons type="chat" size="40"></uni-icons> {{
		commentCount }}</text>
		</view>
		<view class="share-button"><uni-icons type="redo" size="40"></uni-icons></view>
	</view>
</template>
<script setup>
import { getActivityStats } from "@/api/index.js"
import {
	ref,
	computed,
	onMounted
} from "vue"
const props = defineProps(['isInteractionVisible', 'articleId', 'articleTitle'])
const isInteractionVisible = computed(() => props.isInteractionVisible)
const articleId = computed(() => props.articleId)

const favouriteCount = ref(0);
const commentCount = ref(0);

onMounted(async () => {
	const res = await getActivityStats(articleId.value)
	commentCount.value = res.comment_count
	favouriteCount.value = res.favourite_count
})

const gotoCommentList = () => {
	uni.navigateTo({
		url: '/pages/commentList/commentList?articleId=' + props.articleId + '&articleTitle=' + props.articleTitle
	})
};

</script>
<style scoped>
/* 交互按钮 */
.interaction-buttons {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	position: fixed;
	bottom: 0;
	left: 0;
	gap: 10px;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
	z-index: 1;
}

.interaction-buttons.visible {
	transform: translateY(0);
}

.like-button,
.comment-button,
.share-button {

	border: none;

	border-radius: 5px;
}
</style>